<template>
    <div class="app-container home">
        <div class="title">本人结算信息</div>
        <div class="cardInfo">
            <div class="left">
                {{ legalPerson }}
            </div>
            <div class="right">
                {{ replaceStr(6, 16, identityNo) }}
            </div>
        </div>
        <div class="info">银行卡号为持卡人本人银行，目前仅支持对私结算信息</div>
        <div class="content">
            <van-cell-group>
                <van-field v-model="bankAccountNo" label="卡号" placeholder="请输入卡号" />
            </van-cell-group>
        </div>
        <div class="content" @click="selectBankList">
            <van-cell-group>
                <van-field v-model="bankNameZh.HEAD_BANK_NAME" readonly label="开户总行" placeholder="请选择开户总行" right-icon="arrow" />
            </van-cell-group>
        </div>
        <div class="content">
            <van-cell-group>
                <van-field v-model="phone" label="手机号" type="number" placeholder="请输入手机号" />
            </van-cell-group>
        </div>
        <div class="privacy">
            <van-checkbox checked-color="#66d6ff" shape="square" v-model="checked">同意并已阅读</van-checkbox>
            <div class="cat" @click="privacySettlement">《用户授权协议》</div>
        </div>
        <div class="btn">
            <van-button color="#66d6ff" @click="confirm" type="primary">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;提交
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </van-button>
        </div>
    </div>
</template>
<script>
export default {
    name: 'editSettlement'
}
</script>
<script setup name="editSettlement">
import { findByAgentNoBankInfo, settleChange } from '../../api/wallet'
import { replaceStr } from '@/utils/utils'
import { showToast, showSuccessToast } from 'vant'
import store from '@/store/index'

const router = useRouter()
const bankAccountNo = ref('')
const bankNameZh = ref({})
const phone = ref('')
const identityNo = ref('')
const bankAccountName = ref('')
const legalPerson = ref('')
const legalPerson11 = ref('')
const checked = ref(false)
onActivated(() => {
    bankNameZh.value = store.state.data.BANK
})
bankNameZh.value = store.state.data.BANK
const selectBankList = () => {
    router.push({
        path: '/bankList'
    })
}
const nameDesensitization = str => {
    if (null == str || str == undefined || str.length == 0) {
        return ''
    }
    if (str.length == 1) {
        return str
    }
    if (str.length == 2) {
        return str.substring(0, 1) + '*' //截取name 字符串截取第一个字符，
    }

    let starStr = ''
    for (let index = 0; index < str.length - 2; index++) {
        starStr += '*'
    }
    return str.substring(0, 1) + starStr + str.substring(str.length - 1, str.length)
}
const privacySettlement = () => {
    router.push({
        path: '/privacySettlement'
    })
}
const confirm = () => {
    if (!checked.value) {
        showToast('请同意用户授权协议')
        return
    }
    if (bankAccountNo.value === '') {
        showToast('请输入卡号')
        return
    }
    if (!bankNameZh.value.HEAD_BANK_CODE) {
        showToast('请选择开户总行')
        return
    }
    if (phone.value === '') {
        showToast('请输入预留手机号')
        return
    }
    if (!/^1[23456789]\d{9}$/.test(phone.value)) {
        showToast('手机号码有误，请重填')
        return
    }
    settleChange({
        accountType: 'INDIVIDUAL',
        bankAccountName: legalPerson11.value,
        bankAccountNo: bankAccountNo.value,
        identityNo: identityNo.value,
        prePhone: phone.value,
        bankCardUrl: '', //上传银行卡照片
        bankCode: bankNameZh.value.HEAD_BANK_CODE, //总行信息
        alliedBankCode: '', //支行信息
        areaCode: '' //地区码
    }).then(res => {
        if (res.code == 200) {
            showSuccessToast('变更成功')
            setTimeout(() => {
                router.go(-2)
            }, 1500)
        }
    })
}
const getMyInfo = () => {
    findByAgentNoBankInfo().then(res => {
        if (res.code == 200) {
            identityNo.value = res.object.settleInfoBean.identityNo
            legalPerson.value = nameDesensitization(res.object.settleInfoBean.bankAccountName)
            legalPerson11.value = res.object.settleInfoBean.bankAccountName
        }
    })
}
getMyInfo()
</script>

<style scoped lang="scss">
.app-container {
    padding: 10px;

    .title {
        font-size: 15px;
        font-family: SimHei;
        font-weight: 400;
        color: #000000;
        opacity: 1;
    }

    .cardInfo {
        display: flex;
        align-items: center;
        padding: 10px;
        justify-content: center;
        font-size: 15px;
        font-family: SimHei;
        font-weight: 400;
        color: #717882;
        opacity: 1;

        .left {
            margin-right: 10px;
        }
    }

    .info {
        font-size: 12px;
        font-family: SimHei;
        font-weight: 400;
        color: #717882;
        opacity: 1;
    }

    .content {
        margin-top: 10px;
    }

    .privacy {
        padding: 10px 0;
        display: flex;
        align-items: center;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #66d6ff;
        opacity: 1;
    }

    .btn {
        margin-top: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>
